import EHeader from '../../common/EHeader';
import ItemTab from '../../common/ItemTab';
import List from '../../common/List';
import { WeaLocaleProvider } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfCenterStore')
@observer
class Main extends React.Component{
  constructor() {
    super()
    this.state = {
      currentTab: '',
    }
  }
  componentDidMount() {
    const { getWfInfo } = this.props.wfCenterStore;
    getWfInfo({}, this.changeState);
  }
  componentWillReceiveProps(nextProps) {
    const { getWfInfo } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getWfInfo({}, this.changeState);
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  changeState = (obj={}) => {
    this.setState({
      currentTab: obj.tabs && obj.tabs[0].key
    });
  }
  changeTab = (v) => {
    const { getTabSwitch } = this.props.wfCenterStore;
    this.setState({
      currentTab: v
    })
    getTabSwitch('startWf', {key: v})
  }
  moreBtnClick = () => {
    const { currentTab } = this.state;
    if(currentTab == '3') {//常用流程
      window.open('/spa/workflow/index_mobx.jsp#/main/workflow/add?jumpTab=3', '_blank')
    } else if( currentTab == '2'){ //我的收藏
      window.open('/spa/workflow/index_mobx.jsp#/main/workflow/add?jumpTab=2', '_blank')
    } 
  }
  render() {
    const { loadingStatusObj:{startHasLoaded}, startWfData } = this.props.wfCenterStore;
    const { tabs=[], datas={}, unSupportSPAWf=[]} = startWfData;
    const { currentTab } = this.state;
    let tabData = toJS(datas).length > 0 && toJS(datas).filter( v => v.key == currentTab)[0] || [];
    return(
        <div className='wf-center-ele-item'>
          <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@do8onw`} 
            title={getLabel(516839,'发起流程')}
            toolSetting={{more: true}}
            moreBtnClick={this.moreBtnClick}
            />
          <div className='wf-center-ele-content'>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@cwly3z`} spinning={!startHasLoaded}/>
            { 
              startHasLoaded && <div className='startWf-element-div'>
                <ItemTab ecId={`${this && this.props && this.props.ecId || ''}_ItemTab@t54q6n`} 
                  tabs={tabs} 
                  activeTab={this.state.currentTab} 
                  changeTab={this.changeTab}
                />
                <List ecId={`${this && this.props && this.props.ecId || ''}_List@frc0ho`} 
                  listData={tabData.datas}
                  unSupportSPAWf={unSupportSPAWf}
                  ifFromAddWf={true}
                />
              </div>
            }
          </div>
      </div>
      ) 
    }
}

export default Main